// 放置全局指令
import Vue from 'vue'
import store from '@/store'
// 封装和按钮权限控制相关的指令

// 实现流程

// 1. 全局指令的定义方式 - 没有任何功能指令模板代码跑通
Vue.directive('btn-auth', {

  // 指令绑定的元素被渲染到dom 中时 自动执行
  inserted(el, binding) {
    // el: 指令绑定到的那个dom 元素  button
    // binding.value: 指令的绑定值  v-btn-auth="指令绑定值"
    console.log(el, binding.value)
    // 按钮权限控制逻辑
    // 2. 在指令中添加控制按钮显示和隐藏的逻辑
    // 核心逻辑: 判断当前按钮独有的权限标识是否在我们的perms 中找到  如果找得到 就显示  如果找不到 就隐藏
    const btnPerm = binding.value  // 当前按钮独有的标识  固定的  和 后端商量好的
    const perms = store.state.user.userProfile.permissions  // 当前用户拥有的权限列表
    if (!perms.includes(btnPerm)) {
      // 按钮权限不足  隐藏按钮
      el.remove()
    }
  }
})
// 2. 在指令中添加控制按钮显示和隐藏的逻辑
